<template>
  <div class="usersongsheet w700">
    <div class="vant-tab">
      <van-tabs v-model="active" animated title-active-color="#fff" color="#fff" line-width="0">
        <van-tab title="创建歌单" :badge="userSheet.length">
          <transition-group
            class="global-sheet-list"
            :class="{'columnMode':this.columnMode}"
            tag="ul"
            name="flip-list"
          >
            <li v-for="(item,index) in this.userSheet" :key="index" @click="handleSheetClick(item)">
              <songsheet-item
                :image="item.coverImgUrl"
                :name="item.name"
                :count="item.trackCount"
                :privacy="item.privacy"
                :id="item.id"
              ></songsheet-item>
            </li>
          </transition-group>
        </van-tab>
        <van-tab title="收藏歌单" :badge="collectionSheet.length">
          <transition-group
            class="global-sheet-list"
            :class="{'columnMode':this.columnMode}"
            tag="ul"
            name="flip-list"
          >
            <li
              v-for="(item,index) in this.collectionSheet"
              :key="index"
              @click="handleSheetClick(item)"
            >
              <songsheet-item
                :image="item.coverImgUrl"
                :name="item.name"
                :count="item.trackCount"
                :privacy="item.privacy"
              ></songsheet-item>
            </li>
          </transition-group>
        </van-tab>
        <!-- <van-tab title="歌单助手" badge="beta" class="sheethelper"></van-tab> -->
      </van-tabs>
      <div class="songsheet-control">
        <i class="iconfont iconjia2" @click="showAddSheet=true"></i>
        <i class="iconfont icondiandiandian" @click="showactionSheet=true"></i>
      </div>
    </div>
    <van-popup
      v-model="showAddSheet"
      round
      position="bottom"
      :style="{ height: '22%' }"
      get-container="body"
    >
      <div class="showAddSheet-centent">
        <div class="title">
          <div class="cancel" @click="showAddSheet=false">取消</div>
          <h4>新建歌单</h4>
          <div class="finish" :class="{'allow':newSheetName}" @click="handleCreateSheet">完成</div>
        </div>
        <input type="text" placeholder="歌单标题" v-model="newSheetName" />
        <van-checkbox v-model="privacy" checked-color="#222" icon-size="16px">设置为隐私歌单</van-checkbox>
      </div>
    </van-popup>

    <van-popup
      v-model="showactionSheet"
      round
      position="bottom"
      :style="{ height: '40%' }"
      get-container="body"
    >
      <div class="showactionSheet-centent">
        <div class="title">
          <div class="cancel">请选择</div>
        </div>
        <div class="global-cell-group">
          <div class="cell-item" @click="addSheet">
            <i class="iconfont iconxinjian"></i>
            <p>新建歌单</p>
          </div>
          <div class="cell-item" @click="manageSheet">
            <i class="iconfont iconliebiao"></i>
            <p>管理歌单</p>
          </div>
          <div class="cell-item">
            <i class="iconfont icondaoru"></i>
            <p>导入外部歌单</p>
          </div>
          <div class="cell-item" @click="switchSheetMode">
            <i
              class="iconfont"
              :class="{'iconduolie':this.columnMode,'icondanlie':!this.columnMode}"
            ></i>
            <p>切换至{{columnModeTXT}}模式</p>
          </div>
        </div>
      </div>
    </van-popup>
    <manage-sheet v-if="showManage"></manage-sheet>
  </div>
</template>

<script>
import { Tab, Tabs, Checkbox, Popup } from "vant";
import { createSheet } from "@/request/api";
import SongsheetItem from "@/base/songsheet-item/songsheet-item";
import ManageSheet from "@/views/user/manage-sheet/manage-sheet";
import { mapMutations } from "vuex";

export default {
  props: {
    sheets: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      showAddSheet: false,
      privacy: false,
      active: 0,
      //   用户歌单：
      userSheet: [],
      newSheetName: "",
      //   收藏歌单：
      collectionSheet: [],
      showactionSheet: false,
      // 管理歌单：
      showManage: false,
      // 是否以列展示歌单:
      columnMode: false
    };
  },
  computed: {
    columnModeTXT() {
      return this.columnMode ? "多列" : "单列";
    }
  },
  watch: {
    sheets: {
      handler(oldVal, val) {
        this.filterSheet();
      }
    },
    deep: true
  },
  methods: {
    filterSheet() {
      let temp = this.sheets.slice(1, this.sheets.length);
      this.userSheet = temp.filter(item => {
        return !item.subscribed;
      });
      this.collectionSheet = temp.filter(item => {
        return item.subscribed;
      });
    },
    handleSheetClick(item) {
      this.$router.push({
        name: "songsheet",
        query: { id: item.id }
      });
      this.setSonngSheet(item);
      this.setSongSheetType("私人歌单");
    },
    // 格式化歌曲：
    _normalizeSongs(list) {
      let ret = [];
      list.forEach(item => {
        if (item.id && item.album.id) {
          ret.push(createSearchSongs(item));
        }
      });
      return ret;
    },
    ...mapMutations({
      setSonngSheet: "SET_SONGSHEET",
      setSongSheetType: "SET_SONGSHEET_TYPE"
    }),
    // 创建新歌单：
    async handleCreateSheet() {
      if (!this.newSheetName) {
        return;
      } else {
        const res = await createSheet({
          name: this.newSheetName,
          privacy: this.privacy ? "10" : "0"
        });
        if (res.code === 200) {
          this.$toast("创建歌单成功");
          this.showAddSheet = false;
          this.privacy = false;
          this.newSheetName = "";
          this.$emit("updateSheet");
        }
      }
    },
    addSheet() {
      this.showAddSheet = true;
      this.showactionSheet = false;
    },
    // 管理歌单
    manageSheet() {
      this.showactionSheet = false;
      let data = [];
      if (this.active === 0) {
        data = this.userSheet;
      } else {
        data = this.collectionSheet;
      }

      this.$router.push({
        name: "manageSheet",
        params: {
          sheets: data
        }
      });
    },
    // 改变歌单列表展示模式：
    switchSheetMode() {
      this.columnMode = !this.columnMode;
      this.showactionSheet = false;
    }
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Checkbox.name]: Checkbox,
    [Popup.name]: Popup,
    SongsheetItem,
    ManageSheet
  }
};
</script>

<style lang="less" scoped>
.usersongsheet {
  padding-top: 0.5333rem;
  .flex-nowrap-sb(center);
  .vant-tab {
    width: 100%;
    /deep/.van-tab__text-wrapper {
      //   .flex-row-nowrap(flex-start);
    }
    /deep/.van-tab {
      flex: inherit;
      padding: 0;
      padding-right: 0.2rem;
      margin-right: 0.2rem;
      font-size: 16px;
    }
    /deep/.van-info {
      background-color: transparent;
      border: 1px solid transparent;
      padding: 0;
      min-width: auto;
      right: -6px;
      //   position: relative;
    }
  }
  .songsheet-control {
    position: absolute;
    right: 0;
    top: 12px;
    .flex-row-nowrap(center);
    i {
      .extend-click();
      font-size: 0.4267rem;
      .cf;
      margin-left: 0.4rem;
      &.icondiandiandian {
        font-size: 0.56rem;
      }
    }
  }
}
.global-sheet-list {
  margin-top: 0.32rem;
  .flex-wrap-sb;
  li {
    width: 48%;
    padding-right: 5%;
  }
  &.columnMode {
    flex-flow: row wrap;
    // align-items: flex-start;
    li {
      width: 100%;
    }
  }
}

.showAddSheet-centent {
  padding: 0 16px;
  padding-bottom: 30px;
  width: 100%;
  .title {
    padding: 18px 0 15px;
    .flex-nowrap-sb(center);
    .cancel {
      font-size: 16px;
      opacity: 0.9;
    }
    h4 {
      font-size: 16px;
      color: #fff;
      font-weight: bold;
    }
    .finish {
      font-size: 16px;
      color: #999;
      opacity: 0.75;

      &.allow {
        opacity: 1;
        color: #fff;
      }
    }
  }
}
.van-popup {
  background-color: #333;
  color: #fff;
  input {
    padding: 8px 0;
    width: 100%;
    color: #fff;
    background-color: #343434;
    border: none;

    line-height: 1rem;
    font-size: 14px;
    &::-webkit-input-placeholder {
      color: #fff;
    }
    &::-moz-placeholder {
      color: #fff;
    }
    &::-ms-input-placeholder {
      color: #fff;
    }
  }
  /deep/.van-checkbox__label {
    color: #fff;
    font-size: 14px;
    opacity: 0.7;
  }
}
.van-action-sheet__description {
  .cf;
}
/deep/.van-cell-group {
  background-color: #333;
  .van-cell {
    background-color: #333;
    .cf;

    padding-left: 0;
  }
}

.showactionSheet-centent {
  padding: 0 0;
  padding-bottom: 30px;
  width: 100%;
  .title {
    padding: 14px 0.32rem;
    .flex-nowrap-sb(center);
    border-bottom: 1px solid rgba(187, 187, 187, 0.4);
    .cancel {
      font-size: 16px;

      .cf;
    }
  }
}
.global-cell-group {
  padding-top: 0.3733rem;
  .cell-item {
    padding-left: 0.45rem;
    .flex-row-nowrap(center);
    margin-bottom: 0.16rem;
    i {
      font-size: 18px;
      color: #f8f8f8;
    }
    p {
      margin-left: 0.32rem;
      font-size: 15px;
      width: 100%;
      color: #f8f8f8;
      padding: 0.36rem 0;
      border-bottom: 1px solid rgba(187, 187, 187, 0.4);
    }
    &:last-child {
      p {
        border-bottom: none;
      }
    }
  }
}
</style>